<!--最新文章代码-->
<template>
  <div class="newblogs">
    <h2 class="hometitle">最新文章</h2>
    <BlogCotent :content="this.$store.state.user.newArticle"></BlogCotent>
    <InfiniteLoading @infinite="infiniteHandler"  spinner="waveDots" >
      <span slot="no-more" style="font-size: 14px; color: #566573;">~~~我也是有底线的~~~</span>
    </InfiniteLoading>
  </div>
</template>

<script>

    import BlogCotent from "./BlogCotent";
    export default {
        name: "NewArticle",
      components: {BlogCotent},
      data(){
          return{
            index:0,
            more:false,
            currentPage:2,
          }
      },
      methods: {
        infiniteHandler($state) {
            setTimeout(()=>{
              this.$axios.post(`/api/newtopic/${this.currentPage}`).then(res=>{
                if (res.data.records.length !== 0) {
                  this.$store.commit('user/setNewArticle',res.data.records);
                  this.currentPage += 1;
                  $state.loaded();
                } else {
                  $state.complete();
                }
              }).catch(reason => {});
              this.more = true;
            },1000);
        },

      }

    }
</script>

<style scoped>
.i{
  transition: all 0.6s;
}
.img:hover  .i {

  transform: scale(1.1);
  transition: all 0.6s;
}
.autor a:hover{
  text-decoration: none;
}
.user{
  font-size: 13px;
  color: darkgray;
}
.user a{
  font-size: 10px;
  padding-left: 8px;
}
.user a:hover{
  color: #1989fa;
  cursor:pointer ;
}
.type:hover{
  cursor: pointer;
  text-decoration: underline;

}
</style>
